<script lang="ts">
  import { Modal } from "@skeletonlabs/skeleton-svelte";
  import { X } from "lucide-svelte";

  interface ModalProps {
    title: string;
    content: string;
    okName?: string;
    onCancel: () => void;
    onOk: () => void;
  }

  let props: ModalProps = $props();
</script>

<Modal
  open={true}
  triggerBase="btn preset-tonal"
  contentBase="card bg-surface-200-800 p-4 space-y-4 shadow-xl w-[500px]"
  backdropClasses="backdrop-blur-xs"
  backdropBase="backdrop-none"
  onOpenChange={(ev) => {
    if (!ev.open) {
      props.onCancel();
    }
  }}
>
  {#snippet content()}
    <header class="flex justify-between">
      <h4 class="h4 text-error-600-400">{props.title}</h4>
      <button
        type="button"
        class="btn preset-ghost-primary-500"
        onclick={() => props.onCancel()}
      >
        <X />
      </button>
    </header>
    <h6 class="h6 text-error-600-400 whitespace-pre-wrap">{props.content}</h6>

    <footer class="flex justify-end gap-4">
      <button
        type="button"
        class="btn preset-tonal"
        onclick={() => props.onCancel()}>取消</button
      >
      <button
        type="button"
        class="btn bg-error-300-700 text-error-700-300"
        onclick={() => {
          props.onOk();
        }}>{props.okName ?? "删除"}</button
      >
    </footer>
  {/snippet}
</Modal>
